<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial­-scale=l.0, maximum=l.0, minimum=l.0"> -->
    <title>Document</title>
    <!-- 引入初始化CSS文件 -->
    <link rel="stylesheet" href="css/normalize.css" />
    <!-- 引入首页的CSS -->
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <!-- 提示内容，跳转App开始 -->
    <div class="top-tips">
      <div><img src="images/close.png" alt="" /></div>
      <div><img src="images/logo1.png" alt="" /></div>
      <div>打开京东APP，购物更轻松</div>
      <div>立即打开</div>
    </div>
    <!-- 提示内容，跳转App结束 -->
    <!-- 搜索框开始 -->
    <header class="search-box">
      <div class="search-btn">
        <span></span>
      </div>
      <div class="search">
        <span></span>
        <i></i>
        <!-- <input type="search" name="" id="" placeholder="超薄本"> -->
      </div>
      <div class="login">登录</div>
    </header>
    <!-- 搜索框结束 -->
    <!-- main主要内容区域开始 -->
    <main class="content">
      <!-- 焦点图部分开始 -->
      <div class="banner">
        <!-- 利用一个标签的背景制作了大盒子的背景的效果 -->
        <div class="banner-bg"></div>
        <!-- 制作滑动轮播图 -->
        <ul>
          <li>
            <a href="#"><img src="images/banner01.dpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/banner01.dpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/banner01.dpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/banner01.dpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/banner01.dpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/banner01.dpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/banner01.dpg" alt="" /></a>
          </li>
          <div class="page">
            <label class="current"></label>
            <label for="page2"></label>
            <label for="page3"></label>
            <label for="page4"></label>
            <label for="page5"></label>
            <label for="page6"></label>
            <label for="page7"></label>
          </div>
        </ul>
        <!-- 制作滑动轮播图结束 -->
      </div>
      <!-- 焦点图部分结束 -->
      <!-- 优惠活动布局开始 -->
      <div class="youhui">
        <a href=""><img src="images/banner_bottom_01.dpg" alt="" /></a>
        <a href=""><img src="images/banner_bottom_02.dpg" alt="" /></a>
        <a href=""><img src="images/banner_bottom_03.dpg" alt="" /></a>
      </div>
      <!-- 优惠活动布局结束 -->
      <!-- 导航区域开始 -->
      <nav>
        <div class="mall-nav" >
          <ul class="mall-nav-ul" style="overflow-x: scroll">
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="mall-nav mall-nav-2" >
          <ul class="mall-nav-ul" style="overflow-x: scroll">
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
            <li class="mall-nav-li">
              <a href="#">
                <img src="images/nav01.webp" alt="" />
                <span>京东超市</span>
              </a>
            </li>
          </ul>
        </div>
        <!-- <div class="mall-nav mall-nav-2">
          <li class="mall-nav-li">
            <a href="#">
              <img src="images/nav01.webp" alt="" />
              <span>京东超市</span>
            </a>
          </li>
          <li class="mall-nav-li">
            <a href="#">
              <img src="images/nav01.webp" alt="" />
              <span>京东超市</span>
            </a>
          </li>
          <li class="mall-nav-li">
            <a href="#">
              <img src="images/nav01.webp" alt="" />
              <span>京东超市</span>
            </a>
          </li>
          <li class="mall-nav-li">
            <a href="#">
              <img src="images/nav01.webp" alt="" />
              <span>京东超市</span>
            </a>
          </li>
          <li class="mall-nav-li">
            <a href="#">
              <img src="images/nav01.webp" alt="" />
              <span>京东超市</span>
            </a>
          </li>
        </div> -->
      </nav>
      <!-- 导航区域结束 -->
      <!-- 新人专享开始 -->
      <div class="new">
        <a href="#"><img src="images/new1.dpg" alt="" /></a>
        <a href="#"><img src="images/new2.dpg" alt="" /></a>
      </div>
      <!-- 新人专享结束 -->
      <!-- 京东秒杀 区域开始 -->
      <div class="floor" floor_order="23">
        <div class="floor-the-container">
          <div class="floor-container">
            <div class="sec_kill_floor">
              <div class="title_wrap">
                <a
                  data-event_id="MHome_BHandSeckillTopic"
                  data-event_level="1"
                  class="seckill-left-link j_more_sec_link"
                  href="javascript:void(0);"
                  jump-href="//wqs.jd.com/portal/wx/seckill_m/index.shtml"
                >
                  <!--strong class="seckill-tit-txt">京东秒杀</strong-->
                  <div class="seckill-tit-img">京东秒杀</div>
                  <div class="seckill-timer-wrap">
                    <div class="seckill-nth j_sec_order">14</div>
                    <div id="seckill_time" class="seckill-timer">
                      <div class="seckill-time j_sk_h">00</div>
                      <span class="seckill-time-separator">:</span>
                      <div class="seckill-time j_sk_m">39</div>
                      <span class="seckill-time-separator">:</span>
                      <div class="seckill-time j_sk_s">23</div>
                    </div>
                  </div>
                  <span id="seckill_loading"></span>
                </a>
                <a
                  data-event_id="MHome_BHandSeckillMore"
                  data-event_level="1"
                  class="seckill-more-link j_more_sec_link"
                  href="javascript:void(0);"
                  jump-href="//wqs.jd.com/portal/wx/seckill_m/index.shtml"
                >
                  更多秒杀<i class="seckill-more-icon"></i>
                </a>
              </div>
              <div
                class="floor-container seckill-slider j_sk_wrapper"
                style="overflow-x: scroll"
              >
                <ul class="seckill-new-list j_sk_list">
                  <li class="seckill-new-item j_sk_li">
                    <div class="seckill-item-img">
                      <a
                        data-event_id="MHome_BHandSeckill"
                        data-event_level="1"
                        data-event_param="1"
                        href="javascript:void(0);"
                        jump-href="//wqs.jd.com/portal/wx/seckill_m/index.shtml?wareId=12674427"
                        class="seckill-new-link"
                      >
                        <img
                          onerror="__reloadResource(this)"
                          src="../JD - 重构/images/book.jpg.dpg"
                          class="seckill-photo"
                        />
                      </a>
                    </div>
                    <div class="seckill-item-price">
                      <span class="seckill-new-price"
                        ><em>¥</em
                        ><span class="j_init_price" price="3000">30</span></span
                      >
                      <!--秒杀啊-->
                    </div>
                  </li>
                  <li class="seckill-new-item j_sk_li">
                    <div class="seckill-item-img">
                      <a
                        data-event_id="MHome_BHandSeckill"
                        data-event_level="1"
                        data-event_param="1"
                        href="javascript:void(0);"
                        jump-href="//wqs.jd.com/portal/wx/seckill_m/index.shtml?wareId=12674427"
                        class="seckill-new-link"
                      >
                        <img
                          onerror="__reloadResource(this)"
                          src="../JD - 重构/images/book.jpg.dpg"
                          class="seckill-photo"
                        />
                      </a>
                    </div>
                    <div class="seckill-item-price">
                      <span class="seckill-new-price"
                        ><em>¥</em
                        ><span class="j_init_price" price="3000">30</span></span
                      >
                      <!--秒杀啊-->
                    </div>
                  </li>
                  <li class="seckill-new-item j_sk_li">
                    <div class="seckill-item-img">
                      <a
                        data-event_id="MHome_BHandSeckill"
                        data-event_level="1"
                        data-event_param="1"
                        href="javascript:void(0);"
                        jump-href="//wqs.jd.com/portal/wx/seckill_m/index.shtml?wareId=12674427"
                        class="seckill-new-link"
                      >
                        <img
                          onerror="__reloadResource(this)"
                          src="../JD - 重构/images/book.jpg.dpg"
                          class="seckill-photo"
                        />
                      </a>
                    </div>
                    <div class="seckill-item-price">
                      <span class="seckill-new-price"
                        ><em>¥</em
                        ><span class="j_init_price" price="3000">30</span></span
                      >
                      <!--秒杀啊-->
                    </div>
                  </li>
                  <li class="seckill-new-item j_sk_li">
                    <div class="seckill-item-img">
                      <a
                        data-event_id="MHome_BHandSeckill"
                        data-event_level="1"
                        data-event_param="1"
                        href="javascript:void(0);"
                        jump-href="//wqs.jd.com/portal/wx/seckill_m/index.shtml?wareId=12674427"
                        class="seckill-new-link"
                      >
                        <img
                          onerror="__reloadResource(this)"
                          src="../JD - 重构/images/book.jpg.dpg"
                          class="seckill-photo"
                        />
                      </a>
                    </div>
                    <div class="seckill-item-price">
                      <span class="seckill-new-price"
                        ><em>¥</em
                        ><span class="j_init_price" price="3000">30</span></span
                      >
                      <!--秒杀啊-->
                    </div>
                  </li>
                  <li class="seckill-new-item j_sk_li">
                    <div class="seckill-item-img">
                      <a
                        data-event_id="MHome_BHandSeckill"
                        data-event_level="1"
                        data-event_param="1"
                        href="javascript:void(0);"
                        jump-href="//wqs.jd.com/portal/wx/seckill_m/index.shtml?wareId=12674427"
                        class="seckill-new-link"
                      >
                        <img
                          onerror="__reloadResource(this)"
                          src="../JD - 重构/images/book.jpg.dpg"
                          class="seckill-photo"
                        />
                      </a>
                    </div>
                    <div class="seckill-item-price">
                      <span class="seckill-new-price"
                        ><em>¥</em
                        ><span class="j_init_price" price="3000">30</span></span
                      >
                      <!--秒杀啊-->
                    </div>
                  </li>
                  <li class="seckill-new-item j_sk_li">
                    <div class="seckill-item-img">
                      <a
                        data-event_id="MHome_BHandSeckill"
                        data-event_level="1"
                        data-event_param="1"
                        href="javascript:void(0);"
                        jump-href="//wqs.jd.com/portal/wx/seckill_m/index.shtml?wareId=12674427"
                        class="seckill-new-link"
                      >
                        <img
                          onerror="__reloadResource(this)"
                          src="../JD - 重构/images/book.jpg.dpg"
                          class="seckill-photo"
                        />
                      </a>
                    </div>
                    <div class="seckill-item-price">
                      <span class="seckill-new-price"
                        ><em>¥</em
                        ><span class="j_init_price" price="3000">30</span></span
                      >
                      <!--秒杀啊-->
                    </div>
                  </li>
                  <li class="seckill-new-item j_sk_li">
                    <div class="seckill-item-img">
                      <a
                        data-event_id="MHome_BHandSeckill"
                        data-event_level="1"
                        data-event_param="1"
                        href="javascript:void(0);"
                        jump-href="//wqs.jd.com/portal/wx/seckill_m/index.shtml?wareId=12674427"
                        class="seckill-new-link"
                      >
                        <img
                          onerror="__reloadResource(this)"
                          src="../JD - 重构/images/book.jpg.dpg"
                          class="seckill-photo"
                        />
                      </a>
                    </div>
                    <div class="seckill-item-price">
                      <span class="seckill-new-price"
                        ><em>¥</em
                        ><span class="j_init_price" price="3000">30</span></span
                      >
                      <!--秒杀啊-->
                    </div>
                  </li>
                  <li class="seckill-new-item j_sk_li">
                    <div class="seckill-item-img">
                      <a
                        data-event_id="MHome_BHandSeckill"
                        data-event_level="1"
                        data-event_param="1"
                        href="javascript:void(0);"
                        jump-href="//wqs.jd.com/portal/wx/seckill_m/index.shtml?wareId=12674427"
                        class="seckill-new-link"
                      >
                        <img
                          onerror="__reloadResource(this)"
                          src="../JD - 重构/images/book.jpg.dpg"
                          class="seckill-photo"
                        />
                      </a>
                    </div>
                    <div class="seckill-item-price">
                      <span class="seckill-new-price"
                        ><em>¥</em
                        ><span class="j_init_price" price="3000">30</span></span
                      >
                      <!--秒杀啊-->
                    </div>
                  </li>
                  <li class="seckill-new-item j_sk_li">
                    <div class="seckill-item-img">
                      <a
                        data-event_id="MHome_BHandSeckill"
                        data-event_level="1"
                        data-event_param="1"
                        href="javascript:void(0);"
                        jump-href="//wqs.jd.com/portal/wx/seckill_m/index.shtml?wareId=12674427"
                        class="seckill-new-link"
                      >
                        <img
                          onerror="__reloadResource(this)"
                          src="../JD - 重构/images/book.jpg.dpg"
                          class="seckill-photo"
                        />
                      </a>
                    </div>
                    <div class="seckill-item-price">
                      <span class="seckill-new-price"
                        ><em>¥</em
                        ><span class="j_init_price" price="3000">30</span></span
                      >
                      <!--秒杀啊-->
                    </div>
                  </li>
                  <li class="seckill-new-item j_sk_li">
                    <div class="seckill-item-img">
                      <a
                        data-event_id="MHome_BHandSeckill"
                        data-event_level="1"
                        data-event_param="1"
                        href="javascript:void(0);"
                        jump-href="//wqs.jd.com/portal/wx/seckill_m/index.shtml?wareId=12674427"
                        class="seckill-new-link"
                      >
                        <img
                          onerror="__reloadResource(this)"
                          src="../JD - 重构/images/book.jpg.dpg"
                          class="seckill-photo"
                        />
                      </a>
                    </div>
                    <div class="seckill-item-price">
                      <span class="seckill-new-price"
                        ><em>¥</em
                        ><span class="j_init_price" price="3000">30</span></span
                      >
                      <!--秒杀啊-->
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 京东秒杀 区域结束 -->

      <!-- 新人专享2开始 -->
      <div
        class="floor floor-8547 j_expo expo_loaded"
        event_id="MHome_BfloorExpo"
        event_param="新人见面礼"
        floor_id="8547"
        floor_order="24"
        floor_index="3"
      >
        <div class="floor-the-container-outer floor-8547">
          <div class="floor-the-container">
            <div
              class="floor-container bdr-bottom fls06056 style2"
              data-animationtype="0"
              data-ui="2"
              data-floorid="8547"
            >
              <!-- 换一换按钮 -->
              <!--存在logoImage，展示标题栏-->
              <div class="fls06056-logo-image"></div>
              <div class="floor-graphic-item">
                <!--额外添加兜底处理：imagetype只要为0，就要去除图文之间间隙-->
                <!--左右两边图片（0，3）要有border-radius-->
                <!--border-radius属性值-->
                <!-- 第一行：sku，第二行：副标题，第三行：主标题 -->
                <div class="fls06056_ui0" style="height: auto">
                  <div class="fls06056_wrapper">
                    <ul
                      class="fls06056_switch-item floor-items"
                      style="margin: 0"
                    >
                      <li
                        class="fliper anim_back j-floor-item"
                        style="text-align: center"
                      >
                        <a
                          class="floor-item-link"
                          style="position: relative"
                          data-event_id="MHome_BFloor"
                          data-event_level="1"
                          data-event_param="j_event_param"
                          href="javascript:void(0);"
                          jump-href="//h5.m.jd.com/babelDiy/Zeus/3mR9DE9rpttcYppE2ytUtGGbUzs6/index.html?channel=19"
                        >
                          <span class="j_event_param" style="display: none">
                            8547_0_CMSSH412210_0_936037_0_1_1_________0_412210#0__{"floorid":"8547","sourceid":"412210","style":"06056","sourcetype":"0","position":"24#1#1","moduleid":"412210","directid":"132##--"}
                          </span>
                          <img
                            class="fls06056_ui0-bg"
                            onerror="__reloadResource(this)"
                            style=""
                            onload="firstImgLoaded()"
                            src="//m.360buyimg.com/mobilecms/s240x240_jfs/t1/143206/15/18091/55640/5fd3b000Ed0847bb4/a2d1c0ea3e919537.png!q70.jpg.dpg"
                          />
                        </a>
                      </li>
                      <li
                        class="fliper anim_back j-floor-item"
                        style="text-align: center"
                      >
                        <a
                          class="floor-item-link"
                          style="position: relative"
                          data-event_id="MHome_BFloor"
                          data-event_level="1"
                          data-event_param="j_event_param"
                          href="javascript:void(0);"
                          jump-href="//h5.m.jd.com/babelDiy/Zeus/3mR9DE9rpttcYppE2ytUtGGbUzs6/index.html?channel=19"
                        >
                          <span class="j_event_param" style="display: none">
                            8547_0_CMSSH412211_0_936038_0_1_1_________0_412211#0__{"floorid":"8547","sourceid":"412211","style":"06056","sourcetype":"0","position":"24#1#2","moduleid":"412211","directid":"132##--"}
                          </span>
                          <img
                            class="fls06056_ui0-bg"
                            onerror="__reloadResource(this)"
                            style=""
                            onload="firstImgLoaded()"
                            src="//m.360buyimg.com/mobilecms/s240x240_jfs/t1/121314/20/18322/49641/5faf4c8aE65d89e83/5640b45981c64d9e.png!q70.jpg.dpg"
                          />
                        </a>
                      </li>
                      <li
                        class="fliper anim_back j-floor-item"
                        style="text-align: center"
                      >
                        <a
                          class="floor-item-link"
                          style="position: relative"
                          data-event_id="MHome_BFloor"
                          data-event_level="1"
                          data-event_param="j_event_param"
                          href="javascript:void(0);"
                          jump-href="//h5.m.jd.com/babelDiy/Zeus/3mR9DE9rpttcYppE2ytUtGGbUzs6/index.html?channel=19"
                        >
                          <span class="j_event_param" style="display: none">
                            8547_0_CMSSH412212_0_936039_0_1_1_________0_412212#0__{"floorid":"8547","sourceid":"412212","style":"06056","sourcetype":"0","position":"24#1#3","moduleid":"412212","directid":"132##--"}
                          </span>
                          <img
                            class="fls06056_ui0-bg"
                            onerror="__reloadResource(this)"
                            style=""
                            onload="firstImgLoaded()"
                            src="//m.360buyimg.com/mobilecms/s240x240_jfs/t1/135352/12/16044/61892/5faf4cdaEa902f0d3/db42d50ac8401b8a.png!q70.jpg.dpg"
                          />
                        </a>
                      </li>
                      <li
                        class="fliper anim_back j-floor-item"
                        style="text-align: center"
                      >
                        <a
                          class="floor-item-link"
                          style="position: relative"
                          data-event_id="MHome_BFloor"
                          data-event_level="1"
                          data-event_param="j_event_param"
                          href="javascript:void(0);"
                          jump-href="//h5.m.jd.com/babelDiy/Zeus/3mR9DE9rpttcYppE2ytUtGGbUzs6/index.html?channel=19"
                        >
                          <span class="j_event_param" style="display: none">
                            8547_0_CMSSH412213_0_936040_0_1_1_________0_412213#0__{"floorid":"8547","sourceid":"412213","style":"06056","sourcetype":"0","position":"24#1#4","moduleid":"412213","directid":"132##--"}
                          </span>
                          <img
                            class="fls06056_ui0-bg"
                            onerror="__reloadResource(this)"
                            style=""
                            onload="firstImgLoaded()"
                            src="//m.360buyimg.com/mobilecms/s240x240_jfs/t1/150919/32/6681/54649/5faf4cf6E57bff09a/39e34ac36fc5c49a.png!q70.jpg.dpg"
                          />
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            <!-- floor.content.subFloors -->
          </div>
        </div>
      </div>
      <!-- 新人专享2结束 -->
    </main>
    <!-- main主要内容区域结束 -->
    <footer>
      <div class="footer-nav">
        <a><img src="images/shouye.png" alt="" /></a>
        <a><img src="images/fenlei.png" alt="" /></a>
        <a><img src="images/jingxi.png" alt="" /></a>
        <a><img src="images/gouwuche.png" alt="" /></a>
        <a><img src="images/weidenglu.png" alt="" /></a>
      </div>
    </footer>
  </body>
</html>
